export function useMenuDragger(containerRef, data) {
  // 拖拽
  let currentComponent = null; // 当前拖拽组件
  // 拖拽图标进入
  const dragenter = (e) => {
    e.dataTransfer.dropEffect = "move";
  };
  // 拖拽时在上面
  const dragover = (e) => {
    e.preventDefault(); // 阻止默认事件
  };
  // 拖拽离开
  const dragleave = (e) => {
    e.dataTransfer.dropEffect = "none"; // 还原
  };

  // 松手时处理
  const drop = (e) => {
    // 先拿到原组件
    let blocks = data.value.blocks; // 内部已经渲染的组件
    // 添加新组件
    data.value = {
      ...data.value,
      blocks: [
        ...blocks, // 原组件
        {
          // 新组件--拖拽过来的
          top: e.offsetY,
          left: e.offsetX,
          zIndex: 1,
          key: currentComponent.key, // 当前拖拽的组件
          adjustPosition: true,
          hasResize: false,
          props: {},
          model: {},
        },
      ],
    };
  };
  const dragstart = (e, component) => {
    // dragenter: 进入元素中，添加一个移动的标识
    // dragover: 在目标元素经过时，必须要阻止默认行为，否则不会触发drop事件
    // dragleave: 离开元素时，增加一个禁用标识
    // drop松手时: 根据拖拽的组件  在绘图区渲染一个新的组件
    containerRef.value.addEventListener("dragenter", dragenter);
    containerRef.value.addEventListener("dragover", dragover);
    containerRef.value.addEventListener("dragleave", dragleave);
    containerRef.value.addEventListener("drop", drop);
    // 记录当前组件
    currentComponent = component;
  };

  const dragend = (e, component) => {
    containerRef.value.removeEventListener("dragenter", dragenter);
    containerRef.value.removeEventListener("dragover", dragover);
    containerRef.value.removeEventListener("dragleave", dragleave);
    containerRef.value.removeEventListener("drop", drop);
    // 拖拽结束，清除当前组件
    currentComponent = null;
  };

  return {
    dragstart,
    dragend,
  };
}
